<template>
    <!-- 后端绘图组件 -->
    <cloudStatic 
        v-if="loading" 
        :option="option" 
        :defalutValue="value" 
        @updateDraw="updateDraw" 
        @updateFiles="updateFiles"
        @taskChange="taskChange" 
        @colorList="colorList" 
        @colorGroupChange="colorGroupChange" 
        @group="groupFunction"
        @group2="group2Function" 
        @changeGroupList="groupFunction" 
        @changeStatus="changeStatus"
        @changeGroup2Status="changeGroup2Status" 
        @changeGroupStatus="changeGroupStatus" 
        @changeGroupYList="changeGroupYList"
        @groupY="changeGroupYList" 
        @changeData1="changeGroupYList" 
        @group2Y="group2YFunction"
        @changeData2="group2YFunction"
        @changeGroupYStatus="changeGroupYStatus">
        <!-- changeGroupList  dialog中确认分组条件 -->
        <!-- group  上传返回分组 -->
        <!-- changeStatus  改变分组中分组状态 -->
        <!-- colorGroupChange  上传返回颜色分组 -->
        <!-- colorList  修改颜色组件中颜色 -->
        <!-- taskChange  改变任务 -->
        <!-- updateDraw  更新绘图 -->
        <!-- updateFiles  修改上传文件信息 -->
        <!-- changeGroup2Status  修改样品信息 -->
    </cloudStatic>
    <!-- <div v-else>加载中 请稍后</div> -->
</template>

<script>
import { Loading } from 'element-ui';
import { getPageSettingRequest, commitDrawTaskRequest } from '@/api/tools'
import { deepClone } from '@/utils';
export default {
    name: 'BaiaoweifanUiUserIndex',

    data() {
        return {
            loading: false,
            option: {
                mutualExclusionOptions: []
            },
            queryParams: {
                cloudPictureCode: null,
                routeParams: null,
                files: null,
            },
            taskId: null,
            value: null,
            options: {
                background: 'rgba(255,255,255,0.1)',
                target: '.static_view',
                text:'努力加载数据中,请稍后....'
            }
        };
    },
    created() {
        this.init()
        this.getList()
    },
    methods: {
        init() {
            this.taskId = this.$route.params.taskId
            let name = this.$router.history.current.name
            let routeParams = this.$router.history.current.matched.reduce((pre, item, index) => {
                pre = pre + item.meta.title + ','
                return pre
            }, '')
            //云图ID
            this.queryParams.cloudPictureCode = name
            //路由名称
            this.queryParams.routeParams = routeParams
        },
        async getList() {
            let loadingInstance = Loading.service(this.options)
            const res = await getPageSettingRequest({ pageCode: this.queryParams.cloudPictureCode, taskId: this.taskId })
            if (res.code === 200) {
                this.option = res.data
                //判断页面中是否存在多颜色选择器
                if (this.option.legendConfig.length) {
                    let item = this.option.legendConfig[0].config.find(item => item.type == 'colorMultiple')
                    if (item) {
                        this.option['defalutValue'] = this.option.form[item.prop]
                    }
                }
                let changeChart = res.data.filesConfig.reduce((pre, item, index) => {
                    pre.push(
                        {
                            type: item.code,
                            id: item.id
                        }
                    )
                    return pre
                }, [])
                let num = -1
                this.option.mutualExclusionOptions = res.data.group.dataGroupList.reduce((pre, item, index) => {
                    if (item.ischecked) {
                        num++
                        pre.push({
                            value: num,
                            label: item.groupTitle
                        })
                    }
                    return pre
                }, [])
                //分组信息
                this.queryParams.group = this.option.group
                this.queryParams.groupY = this.option.groupY
                this.queryParams.group2 = this.option.group2
                this.queryParams.group2Y = this.option.group2Y
                localStorage.setItem('cloneData2Y', JSON.stringify(this.option.group2Y))
                this.queryParams.isGroup = this.option.isGroup
                this.queryParams.files = changeChart
                this.loading = true
            } else {
                this.$message.error(res.message)
            }
            loadingInstance.close();
            if(this.taskId){
                this.$message({
                    type:'success',
                    message:'任务运行成功！'
                })
            }
        },
        //更新绘图
        async updateDraw(value, colorGroupList) {
            let obj = new Date;
            //获取年月日，时分秒
            let a = obj.getFullYear();
            let b = obj.getMonth() + 1;   //月份从0月开始，所以需要+1
            let c = obj.getDate();
            let d = obj.getHours();
            let e = obj.getMinutes();
            let f = obj.getSeconds();
            let num = Math.ceil(Math.random() * 1000);
            if (('' + b).length < 2) b = '0' + b
            if (('' + c).length < 2) c = '0' + c
            if (('' + d).length < 2) d = '0' + d
            if (('' + e).length < 2) e = '0' + e
            if (('' + f).length < 2) f = '0' + f
            let taskName = `${a}${b}${c}${d}${e}${f} - ${num}`
            this.queryParams = {
                ...this.queryParams,
                sessionId: localStorage.getItem('homeSessionId'),
                taskName,
                chartSetting: value,
            }
            if (colorGroupList) {
                this.queryParams = {
                    ...this.queryParams,
                    colorGroupList
                }
            }
            const res = await commitDrawTaskRequest(JSON.stringify(this.queryParams))
            if (res.code !== 200) return this.$message.error(res.message)
            this.$message({
                type: 'success', message: res.message
            })
            // this.getList()
        },
        //修改文件数据
        updateFiles({ type, id }) {
            let item = this.queryParams.files.find(item => item.type === type)
            item.id = id
        },
        taskChange(value) {
            this.taskId = value == '示例' ? null : value
            this.getList()
            this.$forceUpdate();
        },
        colorList(value) {
            this.queryParams = {
                ...this.queryParams,
                colorGroupList: value
            }
        },
        colorGroupChange(value) {
            this.option.colorGroupList = deepClone(value)
        },
        groupFunction({ dataGroupList, sampleList }) {
            let num = -1
            this.option.mutualExclusionOptions = dataGroupList.reduce((pre, item, index) => {
                if (item.ischecked) {
                    num++
                    pre.push({
                        value: num,
                        label: item.groupTitle
                    })
                }
                return pre
            }, [])
            this.queryParams = { ...this.queryParams, group: { dataGroupList, sampleList } }
            this.option.group = { dataGroupList, sampleList }
        },
        changeGroupYList({ dataGroupList, sampleList }) {
            this.queryParams = { ...this.queryParams, groupY: { dataGroupList, sampleList } }
            this.option.groupY = { dataGroupList, sampleList }
        },
        group2YFunction(group2Y) {
            this.queryParams = { ...this.queryParams, group2Y }
            this.option.group2Y = deepClone(group2Y)
        },
        group2Function(group2) {
            this.queryParams = { ...this.queryParams, group2 }
            this.option.group2 = deepClone(group2)
        },
        changeStatus(value) {
            let num = -1
            this.option.mutualExclusionOptions = value.reduce((pre, item, index) => {
                if (item.ischecked) {
                    num++
                    pre.push({
                        value: num,
                        label: item.groupTitle
                    })
                }
                return pre
            }, [])
            this.queryParams.group.dataGroupList = value
        },
        changeGroup2Status(value) {
            this.queryParams.group2 = value
        },
        changeGroupStatus(value) {
            this.queryParams.isGroup = value
        },
        changeGroupYStatus(value) {
            this.queryParams.yIsGroup = value
            this.option.yIsGroup = value
        }
    },
};
</script>

<style lang="scss" scoped></style>